<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../js/plugins/webuploader/webuploader.css">
    <style>
        #fileImage{width: 300px;height: 300px; margin: 20px auto;background-repeat:  no-repeat ;background-position:  left top;background-size: contain; }
        #fileInfo{border: 1px solid #eee;}
    </style>
</head>
<body>
    <div id="fileImage"></div>
    <input type="file" value="upload" id="fileInput" multiple="multiple" accept="image/*">
    <!--<p id="fileInfo"></p>-->
    <button onclick="upload()">上传</button>

    <script src="../js/plugins/webuploader/webuploader.js"></script>
    <script>
        var fileInput = document.getElementById("fileInput"),
            fileImage = document.getElementById("fileImage");
            // fileInfo = document.getElementById("fileInfo");
        //监听change事件
        fileInput.addEventListener('change',function(e){
            //清空预览区背景图片
            console.log(e.target.files);
            // fileImage.style.backgroundImage = '';
            fileImage.innerHTML = '';
            //检查文件是否选择
            if(!fileInput.value){
                fileInfo.innerHTML = "没有选择任何文件";
                return;
            }

            //获取file的引用
            var file = fileInput.files;
            //获取file信息
            // fileInfo.innerHTML = '文件'+file.name+'<br>'+
            //     '大小'+file.size+'<br>'+
            //     '修改'+file.lastModifiedDate+'<br>';
            // if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif'){
            //     alert('不是有效的图片');
            //     return;
            // }
            var img = ' ';
            //读取文件
            for(var i=0,file=fileInput.files;i<file.length;i++){
                var reader = new FileReader();
                reader.onload = function(e){
                    console.log(e);
                    var data = e.target.result;
                    console.log(e.target)
                    // fileImage.style.backgroundImage = 'url('+data+')';
                    var img = document.createElement("img");
                    img.src=data;
                    fileImage.appendChild(img)
                }
                // 以DataURL的形式读取文件:
                reader.readAsDataURL(file[i]);
            }
            // var reader = new FileReader();
            // reader.onload = function(e){
            //     console.log(e);
            //     var data = e.target.result;
            //     console.log(e.target)
            //     fileBase = data;
            //     fileImage.style.backgroundImage = 'url('+data+')';
            // }
            // // 以DataURL的形式读取文件:
            // reader.readAsDataURL(file);
        });


        function upload(){
            for(var i=0;i<fileInput.files.length;i++){
                uploadImg(fileInput.files[i])
            }
        }
        function uploadImg(f) {
            var xhr = new XMLHttpRequest();
            var formData = new FormData();
            // for(var i=0; f=fileInput.files[i]; i++){
            //     formData.append('files', f);
            // }
            formData.append('file',f);
            xhr.onreadystatechange = function (e) {
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        console.log(xhr.responseText);
                    }else {
                        console.log(xhr.responseText);
                    }
                }
            }

            xhr.open('POST', 'https://tzgl.freei.cc/admin_upload', true);
            xhr.send(formData);
        }



    </script>
</body>
</html>
